import React from 'react'
import {Button,  Table} from "antd";
import moment from 'moment'
import styles from './StayList.less';
import classNames from 'classnames';
import './table.css';

const columns = [
  {
    key: '1',
    title: '设备',
    dataIndex: 'device_id',
    width:150,
    defaultSortOrder: 'descend',
  },
  {
    key: '2',
    title: '站名',
    width:250,
    dataIndex: 'station_name',
  },
  // {
  //   key: '3',
  //   title: '地址',
  //   dataIndex: 'address',
  // },
  {
    key: '4',
    title: '开始时间',
    width:150,
    dataIndex: 'startTime',
  },
  // {
  //   key: '5',
  //   title: '到达时间',
  //   dataIndex: 'endTime',
  // },
  {
    key: '6',
    title: '停留时间',
    width:150,
    dataIndex: 'duration',

  }, {
    key: '7',
    title: '坐标',
    dataIndex: 'xy',
    width:250,
    render: xy => <span>{xy.join(',')}</span>,
  }
];

class StayList extends React.Component {
  constructor(props) {
    super(props);
    document.body.style.cssText = 'overflow:hidden;';
  }

  setRowClassName=(row)=>{
    if(row.id===this.props.activeTableIdx){
      return 'clickRowStyl'
    }else {
      return ''
    }
    // return row.id === this.props.activeTableIdx ? 'clickRowStyl' : '';
  }

  rowEventHandler = (info) => {
    //单击表格行，把该行信息传给信息弹出框---为什么返回ONClick -api
    const {infoWindow} = this.props;
    return {
      onClick: (e) => {
        const {xy} = info;
        const position = {lng: xy[0], lat: xy[1]};
        infoWindow(position, info);
      },
    }
  };

  render() {
    const {points, visible, onClose,keys} = this.props;
    /**
     * 二维数组的遍历：停留点是二维
     */

    var arr=[];
    points.map((item)=>{
      item.map((ele,index)=>{
        ele.key=ele.startTime+index;
        arr.push(ele)
      })
    });

    return (
      <div style={visible ? {transform: 'translateY(0)'} : null} className={styles.wrap}>
        <Button htmlType="button" className={classNames(styles.closeBtn,)} size="small"
                icon={visible ? "down" : "up"} onClick={onClose}>{visible ? '关闭' : '显示'}</Button>
        <div>
          <div className={styles.inner}>
            <div className={classNames(styles.content, 'stay-table-wrap')}>
              <Table
                  size="small"
                  style={{fontSize: 12}}
                  columns={columns}
                  dataSource={arr}
                  onRow={this.rowEventHandler}
                  rowClassName={this.setRowClassName}
                  pagination={{ pageSize: 10 }}
                  scroll={{ y: 190 }}
                  key={keys}
              />
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default StayList;
